
<template>
  <div class="vip-set-page" :style="'padding-top:'+headHeight+'rpx'">  
    <head-back title="超级特权" @goBack="goBack"></head-back>
    <div class="fetch-vip text-center" v-if="!is_vip"> 
       <div class="btn" @click="fetchSuperVip">获取超级特权</div>
    </div>

    <div class="group">
      <div class="item-icon">
        <image src="/static/image/home-like.png" class="img"> </image>
      </div>
      <div class="item-content"> 
        <div class="title">无限点赞次数</div>
        <div class="describe">想喜欢多少人就喜欢多少人</div>
      </div>
      <div class="item-switch"> 
        <switch color="#FF5470"  :checked="vipSwitchForm.thumbUp" @change="thumbUpChange"/>
      </div>
    </div>

    <div class="group">
      <div class="item-icon">
        <image src="/static/image/home-stick.png" class="img"> </image>
      </div>
      <div class="item-content"> 
        <div class="title">置顶推荐</div>
        <div class="describe">每月给我 1 次免费置顶推荐</div>
      </div>
      <div class="item-switch"> 
        <switch color="#FF5470"  :checked="vipSwitchForm.recommendTop" @change="recommendTopChange"/>
      </div>
    </div>

    <div class="group">
      <div class="item-icon">
        <image src="/static/image/home-super-like.png" class="img"> </image>
      </div>
      <div class="item-content"> 
        <div class="title">获取更多超级喜欢</div>
        <div class="describe">每天额外获得5个超级喜欢</div>
      </div>
      <div class="item-switch"> 
        <switch color="#FF5470"  :checked="vipSwitchForm.superLike" @change="superLikeChange"/>
      </div>
    </div>

    <div class="group">
      <div class="item-icon">
        <image src="/static/image/home-withdraw.png" class="img"> </image>
      </div>
      <div class="item-content"> 
        <div class="title">倒回上次的滑动</div>
        <div class="describe">手滑点错了？倒回重滑</div>
      </div>
      <div class="item-switch"> 
        <switch color="#FF5470"  :checked="vipSwitchForm.withdraw" @change="withdrawChange"/>
      </div>
    </div>

    <div class="group">
      <div class="item-icon">
        <image src="/static/image/location-all.png" class="img"> </image>
      </div>
      <div class="item-content"> 
        <div class="title">添加位置</div>
        <div class="describe">添加多个地理位置</div>
      </div>
      <div class="item-switch"> 
        <switch color="#FF5470"  :checked="vipSwitchForm.theDating" @change="locationChange"/>
      </div>
    </div>
    <!--<div class="group-more">
      <div class="group">
        <div class="item-icon">
          <image src="/static/image/key-icon.png" class="img"> </image>
        </div>
        <div class="item-content"> 
          <div class="title">管理我的访客</div>
          <div class="describe">想让谁看自己决定</div>
        </div> 
      </div>
      <div class="cell">
        <span class="text">推荐给与我相关的人</span>
        <span class="cell-switch">  <image src="/static/image/gouxuan.png" class="img"> </image></span>
      </div>
      <div class="cell">
        <span class="text">只推荐给我喜欢的人</span>
        <span class="cell-switch"> <image src="/static/image/gouxuan.png" class="img"> </image> </span>
      </div>
    </div>-->

    <div class="group-more">
      <div class="group">
        <div class="item-icon">
          <image src="/static/image/management-switch.png" class="img"> </image>
        </div>
        <div class="item-content"> 
          <div class="title">管理我的个人资料</div>
          <div class="describe">使我的个人资料对他人不可见</div>
        </div> 
      </div>
      <div class="cell">
        <span class="text">显示我的年龄</span>
        <span class="cell-switch"><switch color="#FF5470"  :checked="vipSwitchForm.switchAge" @change="switchAgeChange"/></span>
      </div>
      <div class="cell">
        <span class="text">显示我的距离</span>
        <span class="cell-switch"><switch color="#FF5470"  :checked="vipSwitchForm.distance" @change="distanceChange"/></span>
      </div>
    </div>
    
    <!--配对成功-->
    <div v-if="setVipShow">
      <charge-vip 
        :vipType="operationData.vipType" 
        :share="operationData.can_share"  
        :current="operationData.current"
        @close="chargeVipClose" 
        @successPay="successPay">
      </charge-vip>
    </div> 
  </div>
</template>

<script>
import * as api from '@/utils/api' ; 
import headBack from '@/components/head-back.vue' ;    
import chargeVip from '@/components/pop-up-box/charge-vip.vue' ; 
import userStore from './../../common/user/store' ; 
const app = getApp()  
export default { 
  onLoad(){    
    let vm = this;
    app.aldstat.sendEvent('我的超级特权'); // 事件名称规范: 不超过255个字符 
     
  },
  onShow: function () {   
    this.is_vip=userStore.state.userInfo.is_vip;
    if(this.is_vip){
      this.vipSwitchForm={
        thumbUp:true, //无限点赞
        recommendTop:true, //置顶推荐
        superLike:true,  //超级喜欢
        withdraw:true, //撤回
        theDating:true, // 添加位置
        switchAge:true, //显示我的年龄
        distance:true, //显示我的距离
      }
    }
  }, 
  components:{
    headBack,
    chargeVip
  }, 
  data () {
    return {   
      is_vip:false,
      headHeight:wx.getStorageSync('headHeight'),
      headPadding:wx.getStorageSync('headPadding'),  
      vipSwitchForm:{
        thumbUp:false, //无限点赞
        recommendTop:false, //置顶推荐
        superLike:false,  //超级喜欢
        withdraw:false, //撤回
        theDating:false, // 添加位置
        switchAge:true, //显示我的年龄
        distance:true, //显示我的距离
      },
      setVipShow:false,
      operationData:{
        vipType:0,  //通用 超级喜欢  置顶
        can_share:false, 
        current:0,   
      },
    }
  },  
 
  methods: {   
    goBack(){  
      wx.navigateBack({ delta: 1 });   
    },   
    fetchSuperVip(){
      this.setVipShow=true;
      this.operationData.current=0; 
    },
    /**获取用户信息 */
    fetchInfo(){
      let vm = this;
      api.getUserDetail().then(res=>{
        if(res.data.code==300000){ 
          userStore.state.userInfo=res.data.data;  
          vm.is_vip=res.data.data.is_vip;
          if(res.data.data.is_vip){
            vm.vipSwitchForm={
              thumbUp:true, //无限点赞
              recommendTop:true, //置顶推荐
              superLike:true,  //超级喜欢
              withdraw:true, //撤回
              theDating:true, // 添加位置
              switchAge:true, //显示我的年龄
              distance:true, //显示我的距离
            }
          }
        }
      })
    }, 
    //支付成功
    successPay(){
      this.fetchInfo();
      this.setVipShow=false;
    },
    //无限点赞次数
    thumbUpChange(){
      if(this.is_vip){
        this.vipSwitchForm.thumbUp=!this.vipSwitchForm.thumbUp;
      }else{
        this.setVipShow=true; 
        this.operationData.current=0; 
      } 
    },
    //置顶推荐
    recommendTopChange(){
      if(this.is_vip){
        this.vipSwitchForm.recommendTop=!this.vipSwitchForm.recommendTop;
      }else{
        this.setVipShow=true;
        this.operationData.current=1; 
      }  
    },
    //获取更多超级喜欢
    superLikeChange(){
      if(this.is_vip){
        this.vipSwitchForm.superLike=!this.vipSwitchForm.superLike;
      }else{
        this.setVipShow=true;
        this.operationData.current=2; 
      }  
    },
    //倒回上次的滑动
    withdrawChange(){
      if(this.is_vip){
        this.vipSwitchForm.withdraw=!this.vipSwitchForm.withdraw;
      }else{
        this.setVipShow=true;
        this.operationData.current=3; 
      }  
      
    },
    //添加位置
    locationChange(){
      if(this.is_vip){
        this.vipSwitchForm.theDating=!this.vipSwitchForm.theDating;
      }else{
        this.setVipShow=true;
        this.operationData.current=4; 
      }  
      
    },
    //显示我的年龄
    switchAgeChange(){
      if(this.is_vip){
        this.vipSwitchForm.switchAge=!this.vipSwitchForm.switchAge;
      }else{
        this.setVipShow=true;
        this.operationData.current=5; 
      } 
     
    },
    //显示我的距离
    distanceChange(){
      if(this.is_vip){
        this.vipSwitchForm.distance=!this.vipSwitchForm.distance;
      }else{
        this.setVipShow=true;
        this.operationData.current=5; 
      }  
    },
    //关闭充值
    chargeVipClose(){
      this.setVipShow=false;
    },
  },
  onShareAppMessage: function(res) { 
    let selfUid = JSON.parse(wx.getStorageSync('account'));   
    let path = `pages/common/login/main?selfUid=${selfUid.uuid}`;  
    return this.onShareAppMessage('',path);
  },   
}
</script> 
 
<style lang="scss" scoped>
.vip-set-page{
  padding-bottom:100rpx;
  .fetch-vip{
    width:100%;
    height:246rpx;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-top:1rpx solid #F3F5F7;
    .btn{
      width:420rpx;
      height:90rpx;
      line-height:90rpx;
      color:#fff;
      background:linear-gradient(162deg,rgba(253,114,146,1) 0%,rgba(253,94,44,1) 100%);
      border-radius:45px;  
      font-size:28rpx;
      font-weight:600;
    }
  }
  .group{
    width:100%;
    height:192rpx;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:26rpx 32rpx;
    margin-top:24rpx;
    .item-icon{
      flex:0 0 144rpx;
      height:144rpx;
      .img{
        width:100%;
        height:100%;
      }
    }
    .item-content{
      flex:1;
      padding:0 24rpx;
      .title{
        font-size:36rpx; 
        font-weight:500;
        color:#4E5761;
      }
      .describe{
        font-size:32rpx; 
        font-weight:400;
        color: #A1A7AE;
      }
    }
    .item-switch{
      flex:0 0 90rpx;
    }
  }
  .cell{
    width:100%;
    height:98rpx;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding-left:50rpx;
    padding-right:32rpx;
    border-top:1rpx solid #E1E6EB;
    .text{
      flex:1;
      font-size:32rpx; 
      font-weight:400;
      color:#808892;
    }
    .cell-switch{
      flex:0 0 90rpx;
    }
    .img{
      width:36rpx;
      height:26rpx;
    }
  }
}
 
</style>
